<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script src="./01-网易云案例/lib/jquery-1.12.4.js"></script>
<script>
    // 为什么要了解json格式的数据
    // 前端与后台通信的主流数据格式,以前还会使用xml
    // 但是因为xml体积太大,浪费性能,后面就改成了json
    // 注意: 后台返回给前台的数据,都是json格式
    // json格式的对象,左右两边都带有引号

    // 1. 手写json对象
    // let jsonWei = {
    //     "name": "威少",
    //     "age": "38",
    //     "gender": "男孩子"
    // }
    // console.log(jsonWei);

    // 2. 手写js对象
    // let jsWei = {
    //     name: '威少',
    //     age: 38,
    //     gender: '男孩子'
    // }
    // console.log(jsWei);

    // 3. 利用jq发起ajax请求,获得后台数据
    // 后台返回的数据格式本身是json数据,只是jQ内部做了转换
    $.get({
        url:'http://www.liulongbin.top:3006/api/getbooks',
        success: function (backData) {
            console.log(backData);// 返回的是一个js对象
        }
    })

    // 4. 假设使用原生的js发起请求
    let xhr = new XMLHttpRequest();
    xhr.open('get','http://www.liulongbin.top:3006/api/getbooks');
    xhr.onload = function () {
        console.log(xhr.response);// 后台响应回json数据

        console.log(JSON.parse(xhr.response));// 手动转换成js数据
    }
    xhr.send();
</script>